<template>
  <div class="dayin">
    <!-- <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button> -->
    <el-popconfirm
      confirm-button-text="好的"
      cancel-button-text="不用了"
      icon-color="red"
      title="是否将以下订单设置为待发货？"
      @confirm="set_DeliveryStatus"
    >
      <el-button  type="primary" slot="reference" class="dayin_btn" style="margin-bottom: 10px;"> 打印预览</el-button>
    </el-popconfirm>
    <div ref="print" id="printArea">
      <table v-for="item,index in dayinlist" :key="index">        
         <tr>
           <th colspan="7">{{ Infomation }}送货单</th>
         </tr>
         <tr>
           <td colspan="6">客户:{{item.order.customer?item.order.customer.customer_name:''}}</td>
           <td colspan="1">订单号:{{item.order.order_number}}</td>
         </tr>
         <tr>
          <td colspan="6">收货地址:{{item.order.customer?item.order.customer.customer_address:''}}</td>
          <!-- <td  colspan="2">联系电话:{{item.order.customer?item.order.customer.contact_phone:''}}</td> -->
          <td colspan="1">送货日期:{{strDate}}</td>
         </tr>
         <tr>
          <td colspan="7">物流:{{item.order.customer?item.order.customer.logistics:''}}</td>
          <!-- <td  colspan="3">承运物流:{{logistics}}</td> -->
         </tr>
         <tr>
           <td>型号</td>
           <td>规格</td>
           <td>颜色</td>
           <td>尺寸</td>
           <td width="60">单位</td>
           <td colspan="2" style="width:200px">客户要求(备注)</td>
         </tr>
         <tr>
          <td>{{item.order.product_name.product_name}} ({{item.order.model_number_name?item.order.model_number_name.model_number:''}})</td>
          <td>{{item.order.specification?item.order.specification.specification:''}}</td>
          <td>{{item.order.color?item.order.color.color:''}}</td>
          <td>{{item.models_field.size}}</td>
          <td>套</td>
          <td colspan="2" rowspan="2" style="width:200px">{{item.order.remark}}</td>
         </tr>
         <tr>
           <td colspan="5">合计:</td>
           <!-- <td colspan="4"></td> -->
         </tr>
         <tr>
           <td colspan="7">发送配件:</td>
           <!-- <td colspan="4"></td> -->
         </tr>
          <tr>
           <td colspan="4">慕萱家具股份有限公司</td>
           <td>联系电话:</td>
           <td>400-609-0558</td>
           <td>收货人签字:</td>
           <!-- <td></td> -->
         </tr>
         <div style="page-break-after: always" v-if="index>0"></div>

      </table>
    </div>
  </div>
</template>

<script>
import { setDeliveryStatus } from "@/api/product/index";
export default {
  data() {
    return {
      dayinlist: [],
      strDate: "",
      bottoms: {
        warehouse_name: "",
        num: "",
        order_number:'',
        company_name: "",
        receivables: "",
        balance: "",
        qiankuan: "",
        contact_phone: "",
        customer_address: "",
        customer_name: "",
        order_date: "",
        logistics:''
      },
      Infomation: "",
      order_num: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation = this.$store.getters.Infomation.company_name;
    this.currentTime();
    console.log(this.dayinlist)
  },
  methods: {
    set_DeliveryStatus() {
      let ids_s = [];
      this.dayinlist.forEach((item) => {
        if (item.logistics_status == 1|| item.logistics_status == 4) {
         
        }else{
          ids_s.push(item.id);
        }
      });
      if(ids_s && ids_s.length>0){
        setDeliveryStatus({ ids: ids_s }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.print();
        }
      });
      }else{
        this.print();
      }
      
    },
    formatterTime(data) {
      if(data){
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
      }else{
        return this.strDate
      }
     
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "-" +
        dateArr[0] +
        "-" +
        dateArr[1] 
        // " " +
        // dateArr[2] +
        // ":" +
        // dateArr[3] +
        // ":" +
        // dateArr[4];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}

/* 
长 75mm
宽 45mm */
#printArea {
  width: 210mm;
  height: 140mm;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea>div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}

#printArea table {
  border: 1px solid #000;
}

#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  word-break: break-all;
  text-align: left;
}

/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding:0px 12px;
}
table tr td{
  line-height:20px;
}
/* table tr th{
  line-height:26px;
} */
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  width:200px;
  display: block;
  background: #0a8fa1;
  border: none;
  margin: 0px auto;
}

.list_order {
  width: 210mm;
  margin: 0 auto;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
}

.list_order .left {
  width: 300px;
}

.list_order .right {
  width: 300px;
}

.list_order .left .lis {
  margin-top: 15px;
}

.list_order .right {
  margin-right: 100px;
}

.list_order .right .lis {
  margin-top: 15px;
}

.div_span {
  margin-bottom: 5px;
}

.div_span div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.div_span span {
  display: block;
  font-size: 16px;
}

h3 {
  font-weight: 500;
  font-size: 16px;
}

/* .table_tb{
  font-size: 16px;
} */
.table_tb tr {
  display: flex;
  /* display: grid; */
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
  /* display: flex;
  justify-content: space-between; */
}

.table_tb tr td {
  font-size: 16px;
  display: block;
  height: auto;
  word-break: break-all;

}

.table_tbs {
  /* border-top: none !important; */
}

@media print {

  .dayin {
    padding: 25px;
    box-sizing: border-box;
  }

  /* 
长 75mm
宽 45mm */
  #printArea {
    width: 210mm;
    height: 140mm;
    box-sizing: border-box;
    margin: 0 auto;
  }

  #printArea>div:first-child {
    margin-top: 0px;
  }

  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }

  #printArea table th {
    color: #333;
    padding: 5px 0;
    font-size: 26px;
  }

  #printArea table {
    border: 1px solid #000;
  }

  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  #printArea table tr td {
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    word-break: break-all;
  }

  /* #printArea table thead th {
  background-color: #0a8fa1;
} */

  #printArea table tr th,
  table tr td {
    padding: 0px 12px;
  }

  .procedure {
    word-wrap: break-word;
  }

  .dayin_btn {
    background: #0a8fa1;
    border: none;
    margin: 20px 0;
  }

  .list_order {
    width: 210mm;
    margin: 0 auto;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
  }

  .list_order .left {
    width: 300px;
  }

  .list_order .right {
    width: 300px;
  }

  .list_order .left .lis {
    margin-top: 15px;
  }

  .list_order .right {
    margin-right: 100px;
  }

  .list_order .right .lis {
    margin-top: 15px;
  }

  .div_span {
    margin-bottom: 5px;
  }

  .div_span div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .div_span span {
    display: block;
    font-size: 16px;
  }

  h3 {
    font-weight: 500;
    font-size: 16px;
  }

  /* .table_tb{
  font-size: 16px;
} */
  .table_tb tr {
    display: flex;
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
    /* display: flex;
  justify-content: space-between; */
  }

  .table_tb tr td {
    font-size: 16px;
    display: block;
    height: auto;
    word-break: break-all;

  }

  .table_tbs {
    /* border-top: none !important; */
  }
  @page { 
    size: landscape;
  }
}</style>
